<extend name="Public/base" />

<block name="style">
  <style>
    .sidebar .right-cnt{
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      -webkit-box-shadow: 1px 2px 5px rgba(180,180,180,0.75);
      -moz-box-shadow: 1px 2px 5px rgba(180,180,180,0.75);
      box-shadow: 1px 2px 5px rgba(180,180,180,0.75);
      min-height: 530px;
      display: block;
      border: 1px solid #c9ccd0;
      background-color: #fff;
    }
    .sidebar .right-head{
      overflow: hidden;
      padding: 0 30px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 14px;
      border-bottom: 1px solid #c9ccd0;
      background-color: #dee0e6;
      background-image: url(../../image/report/gradient-line.png);
      background-position: top;
      background-repeat: no-repeat;
      -webkit-border-top-right-radius: 5px;
      -moz-border-radius-topright: 5px;
      border-top-right-radius: 5px;
      -webkit-border-top-left-radius: 5px;
      -moz-border-radius-topleft: 5px;
      border-top-left-radius: 5px;
    }
    .sidebar .prev-block{
      width: 100%;
      height: 203px;
      line-height: 203px;
      margin-bottom: 40px;
      text-align: center;
    }
    .sidebar .prev-block .file-prev{
      max-width: 203px;
      max-height: 203px;
      vertical-align: middle;
      background-color: #f0f0f0;
      -webkit-box-shadow: 0 0 2px rgba(120,120,120,0.5);
      -moz-box-shadow: 0 0 2px rgba(120,120,120,0.5);
      box-shadow: 0 0 2px rgba(120,120,120,0.5);
    }
  }
  .sidebar .right-body-block .file-info-item {
    margin-bottom: 8px;
  }
</style>
</block>

<block name="sidebar">
  <div class="right-cnt">
    <!-- ko ifnot: certainFile -->
    <div class="right-head">
      未选择文件
    </div>
    <div class="right-body">
      <div class="right-body-block">
        <div class="prev-block">
          <span>点击左侧文件名以查看信息</span>
        </div>
      </div>
    </div>
    <!-- /ko -->
    <!-- ko with: certainFile --><!-- /ko -->
  </div>
</block>
<block name="body">
  <!-- 标题栏 -->
  <div class="main-title">
    <h2>blackwhite的七牛空间</h2>
  </div>
  <div>
    <form action="__SELF__" method="post">
      <input type="text" class="search-input" name="prefix" placeholder="输入资源名前缀匹配">
      <button class="btn" type="submit">搜索</button>

      <input type="file" name="file" id="upload-file">
      <button class="btn" target-form="ids" id="batchDelBtn" type="button">删 除</button>
      <a href="javascript:location.reload(true);" class="btn">刷新</a>
    </form>
  </div>

  <!-- 数据列表 -->
  <div class="data-table table-striped">
    <form action="{:U('batchDel')}" id="ids">
      <table id="file_list">
        <thead>
          <tr>
            <th></th>
            <th>文件名</th>
            <th>mimeType</th>
            <th >最后更新时间</th>
            <th>文件大小</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <volist name="_list" id="vo">
            <tr>
              <td><input type="checkbox" name="key" value="{$vo.key}"></td>
              <td>{$vo.key}</td>
              <td>{$vo.mimeType} </td>
              <td>{$vo.putTime|strval|substr=###,0,11|bcmul="1000000000"|date="Y-m-d H:i:s",###}</td>
              <td>{$vo.fsize|format_bytes}</td>
              <td>
                <a href="javascript:;" data-href="{:U('rename?file='.$vo['key'])}" class="rename" title="{$vo.key}">重命名</a>
                <a href="{:$qiniu->downLink($vo['key'])}" target="_blank">下载</a>
                <a href="{:U('del?file='.$vo['key'])}">删除</a>
                <a href="javascript:adv('{$vo.mimeType}','{$vo.key}')">高级</a>
              </td>
            </tr>
          </volist>
        </tbody>
      </table>
    </form>
  </div>
  <!-- 分页 -->
  <div class="page">
    {$_page}
  </div>
</block>

<block name="script">
  <script type="text/javascript" src="__JS__/uploadify/jquery.uploadify.min.js"></script>
  <script id="hooktpl" type="text/tpl">
    <form action="" method="post" class="form-horizontal hooktpl" id="rename_form">
      <label class="item-label">请输入文件名：</label>
      <div class="controls">
        <label class="textarea">
          <input type="text" name="new_name" class="input-large" />
        </label>
      </div>
    </form>
  </script>

  <script id="imgAdv" type="text/tpl">
    <p>
      <table>
        <tbody>
          <tr>
            <td>
              <input type="radio" class="type" name="type" value=0 checked>
            </td>
            <td>
              查看基本信息
            </td>
          </tr>
          <tr>
            <td>
              <input type="radio" class="type" name="type" value=1>
            </td>
            <td>
              查看exif
            </td>
          </tr>
          <tr>
            <td>
              <input type="radio" class="type" name="type" value=2>
            </td>
            <td>
              <form action="{:U('Qiniu/dealImage')}" class="form-horizontal hooktpl" id="resize_form" target="_blank" method="post">
                <label class="item-label">缩放类型：</label>
                <div class="controls">
                  <label class="radio">
                    <input type="radio" name="mode" value="1">
                    非等比缩放
                  </label>
                  <label class="radio">
                    <input type="radio" name="mode" value="2" checked>
                    等比缩放
                  </label>
                </div>
                <div class="controls">
                  <label class="text">
                    宽度
                    <input type="text" name="w">
                  </label>
                  <label class="text">
                    高度
                    <input type="text" name="h">
                  </label>
                </div>
                <div class="controls">
                  <label class="text">
                    质量
                    <input type="text" name="q" value="100">(1~100)
                  </label>
                  <label class="select">
                    输出格式：
                    <select name="format">
                      <option>jpg</option>
                      <option>gif</option>
                      <option>png</option>
                      <option>webp</option>
                    </select>
                  </label>
                  <input type="hidden" name="imageView" value=1>
                  <input type="hidden" name="key">
                </div>
              </form>
            </td>
          </tr>
        </tbody>
      </table>
    </p>
  </script>

  <script id="videoAdv" type="text/tpl">
    <form action="" method="post" class="form-horizontal hooktpl" id="rename_form">
      <label class="item-label">请输入文件名：</label>
      <div class="controls">
        <label class="textarea">
          <input type="text" name="new_name" class="input-large" />
        </label>
      </div>
    </form>
  </script>

  <script id="mdAdv" type="text/tpl">
    <form action="{:U('Qiniu/dealDoc')}" class="form-horizontal hooktpl" id="translate_form" target="_blank" method="post">
      <label class="item-label">请输入远程css路径：</label>
      <div class="controls">
        <label class="textarea">
          <input type="text" name="cssurl" class="input-large" />
        </label>
      </div>
      <label class="item-label">请选择模式：</label>
      <div class="controls">
        <label class="radio">
          <input type="radio" name="mode" value=0 checked/>
          完整的 HTML(head+body) 输出
        </label>
        <label class="radio">
          <input type="radio" name="mode" value=1 />
          只转为HTML Body
        </label>
      </div>
      <input type="hidden" name="key">
    </form>
  </script>

  <script type="text/javascript">
    (function($){
      //上传文件
      /* 初始化上传插件 */
      $("#upload-file").uploadify({
        "height"          : 30,
        "swf"             : "__JS__/uploadify/uploadify.swf",
        "fileObjName"     : "qiniu_file",
        "buttonText"      : "上传文件",
        "uploader"        : "{:U('uploadOne',array('session_id'=>session_id(),'ajax'=>1))}",
        "width"           : 120,
        'removeTimeout'   : 1,
        'onInit'      : init,
        'multi'       : false,
        "onUploadSuccess" : uploadSuccess,
        'onFallback' : function() {
          alert('未检测到兼容版本的Flash.');
        }
      });
      function init(){
        $('#upload-file, #upload-file-queue').css('display','inline-block');
      }

      /* 文件上传成功回调函数 */
      function uploadSuccess(file, data){
        console.log(data);
        var data = $.parseJSON(data);
        if(data.status){
          updateAlert('上传成功', 'alert-success');
          setTimeout(function(){
            location.reload(true);
          },1500);
        }else{
          console.log(data.data);
          updateAlert('上传失败');
        }
      }

      //文件信息预览
      $('#file_list tr').click(function(event){
        $target = $(event.target);
        $tr = $(this);
        if(!$target.is(':checkbox')){
          $('#file_list :checkbox').removeAttr('checked');
          $tr.find(':checkbox').prop('checked',true);
          $.ajax({
            url : '{:U('detail')}',
            data : { key : $('td:eq(1)', $tr).text()},
            success: function(data){
              if(data.status){
                $('.sidebar .right-cnt').html(data.tpl);
              }else{
                updateAlert('获取文件信息失败');
              }
            }
          })
        }
      });

      //批量删除
      $('#batchDelBtn').click(function(){
        var $checked = $('#file_list input[name="key"]:checked');
        if($checked.length != 0){
          if(confirm('您确认删除吗？')){
            $.ajax({
              url : '{:U('batchDel')}',
              data : { key : $checked.serializeArray()},
              success: function(data){
                if(data.status){
                  updateAlert('删除成功','alert-success');
                  location.reload(true);
                }else{
                  updateAlert('批量删除失败');
                }
              }
            });
          }
        }else{
          updateAlert('请先选择一项');
        }
        return false;
      });

      //重命名


      $('.rename').click(function(){
        var action = $.trim($(this).data('href'));
        var html = $($("#hooktpl").html());
        html.find("input[name=new_name]").val(this.title);
        html.find("input[name=new_name]").parents('form').attr('action', action);
        //ajaxForm 公共函数
            function ajaxForm(element,callback,dataType){
              var form = $(element).closest('form');
              var dataType = dataType || 'json';
              $.ajax({
                type: "POST",
                url: form.attr('action'),
                data: form.serialize(),
                async: false,
                dataType:dataType,
                success: function(data) {
                  if($.isFunction(callback)){
                    callback(data,form);
                  }
                }
              });
            }

        option = {
          title:'文件名更改',
          actions:['close'],
          drag:true,
          tools:true,
          buttons:{"ok":['保存', 'blue',function(){
            var _this = this;
            ajaxForm(this.find('.input-large'),function(data){
              if (data.status){
                _this.hide();
                updateAlert(data.info,'alert-success');
                setTimeout(function(){
                              location.reload(true);
                            },1000);
                    }else{
                      updateAlert(data.info);
                    }
            })
          }]}
        }
        UI.load()
        $.thinkbox(html,option);
      });

    })(jQuery);
    //高级处理
    function adv(mime, key){
      if($.inArray(mime,['image/jpeg','image/png', 'image/gif']) != -1){
        //图片
        var html = $($("#imgAdv").html());
        var option = {
          title:'图片处理',
          actions:['close'],
          drag:true,
          tools:true,
          buttons:{"ok":['提 交', 'blue',function(){
            var _this = this;
            var type = this.find('[name="type"]:checked').val();
            if(type == 2){
              this.find('[name=key]').val(key);
              this.find('#resize_form').submit();
            }else if(type == 0){
              window.open(Core.U('Admin/Qiniu/dealImage','key='+key+'&imageInfo=1'));
            }else{
              window.open(Core.U('Admin/Qiniu/dealImage','key='+key+'&exif=1'))
            }
            this.hide();
          }]}
        }
      }else if(key.slice(-3) == '.md'){
        //markdown
        var html = $($("#mdAdv").html());
        var option = {
          title:'md2html转换',
          actions:['close'],
          drag:true,
          tools:true,
          buttons:{"ok":['提交', 'blue',function(){
            var _this = this;
            this.find('[name=key]').val(key);
            this.find('#translate_form').submit();
          }]}
        }
      }else{
        //视频
        var html = $($("#videoAdv").html());
        var option = {
          title:'视频处理',
          actions:['close'],
          drag:true,
          tools:true,
          buttons:{"ok":['保存', 'blue',function(){
            var _this = this;
            ajaxForm(this.find('.input-large'),function(data){
              if (data.status){
                _this.hide();
                updateAlert(data.info,'alert-success');
                setTimeout(function(){
                  location.reload(true);
                },1000);
              }else{
                updateAlert(data.info);
              }
            })
          }]}
        }
      }
      $.thinkbox(html,option);
    }
  </script>
</block>
